<!DOCTYPE html>
<html lang="zh-CN">

<head>
  {{template "common/head.html"}}
</head>

<body>
  <img src="/static/images/header.jpg" width="100%" />
  <div class="container-fluid">
    <div class="row">
      {{template "common/header.html"}}
    </div>
    <div class="row">
      <div class="col-sm-3 col-md-2">
        <h3 style="color:#09590B;">图书分类</h3>
        <ul class="list-unstyled col-md-offset-1">
          <span></span>
          {{range .kinds}}
          <li>
            <a href="/search/{{.ID}}" class="abtn text-common" style="line-height: 25px;">{{.Name}}</a>
          </li>
          {{end}}
        </ul>
      </div>
      <div class="col-sm-6 col-md-7">
        <div class="panel bg-tran">
          <div class="panel-heading">
            <div class="tag">
              <div>新</div>
              <div>书上架</div>
            </div>
          </div>
          <div class="panel-body">
            {{range .books}}
            <div class="col-sm-6 col-md-3" style="height: 388px;">
              <a class="abtn" href="/book/{{.ID}}">
                <div class="thumbnail border0 bg-tran">
                  <img src="{{.Picture}}" alt="...">
                  <div class="caption">
                    <div class="text-common">{{.Name}}</div>
                    <div class="text-dec">{{if .AuthorNationality}}[{{.AuthorNationality}}]{{end}} {{.Author}} 著</div>
                    <div class="price">￥{{.Price}}</div>
                  </div>
                </div>
              </a>
            </div>
            {{end}}
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-md-3">
        {{if eq .code 0}}
        <h4>hi,{{.user}}</h4>
        <h4>欢迎回淘书网!</h4>
        {{else}}
        <h3 style="color:#09590B;">用户登录</h3>
        <form class="form-horizontal container-fluid" action="/login.html" method="POST">
          <div class="form-group input-group">
            <span class="input-group-btn">
              <label for="phone" class="control-label" style="padding: 6px 12px;font-size: 14px;">账号:</label>
            </span>
            <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号">
          </div>
          <div class="form-group input-group">
            <span class="input-group-btn">
              <label for="password" class="control-label" style="padding: 6px 12px;font-size: 14px;">密码:</label>
            </span>
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
          </div>
          <div class="form-group text-center">
            <div class="col-sm-6">
              <button type="submit" class="btn btn-default">登陆</button>
            </div>
            <div class="col-sm-6">
              <a href="/register.html" class="btn btn-default">注册</a>
            </div>
          </div>
        </form>
        {{end}}
        <div class="panel panel-default">
          <div class="panel-heading">
            <span>公告</span>
            <a class="pull-right abtn">更多</a>
          </div>
          <div class="panel-body">
            <p style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">【新品首发】启迈斯家用超静音折叠跑步机 简初新品</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h3 class="modal-title" style="color: red;">登录失败</h3>
        </div>
        <div class="modal-body">
          <p style="font-size: 16px;" id="errMsg">未知异常,请联系管理员!
            <br/>{{if .errorMsg}}
            <strong>{{.errorMsg}}</strong>{{end}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      var errCode = eval("{{if .code}}{{.code}}{{else}}0{{end}}")
      switch (errCode) {
        case 0:
        case 1:
          return;
        case -1:
          $("#errMsg").html("未知错误，请联系管理员！")
          $('#myModal').modal({ keyboard: false })
          break;
        case 2:
          $("#errMsg").html("账号不存在或者密码错误！")
          $('#myModal').modal({ keyboard: false })
          break;
        case 3:
          $("#errMsg").html("账号或者密码不能为空！")
          $('#myModal').modal({ keyboard: false })
          break;

      }
    })
  </script>
</body>

</html>